<template>
  <view class="SelectLevel">
    <!--选择关卡-->
    <view class="option-item flex flex-row between item-center" @click="openSelectLevelPopup">
      <view class="label flex item-center">
        <text class="required">*</text>
        <text>关卡名称</text>
      </view>
      <view class="operate flex flex-row item-center between">
        <text class="f_1 line-1" style="margin-right: 10px">{{ levelData.levelName }}</text>
        <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/edit.svg"
               class="fs_0 edit-img"/>
      </view>
    </view>
    <view class="option-item flex flex-row between item-center select-wr">
      <view class="label flex item-center">
        <text class="required">*</text>
        <text>闯关机会</text>
      </view>
      <view class="operate flex flex-row item-center between">
        <u--input :value="levelData.passLevel" type="number" border="none" @input="$emit('updateLevelNumber', $event)"/>
        <view style="margin-left: 10px">次</view>
      </view>
    </view>
    <view class="option-item flex flex-row between item-center select-wr">
      <view class="label flex item-center">
        <text class="required">*</text>
        <text>过关条件</text>
      </view>
      <view class="operate flex flex-row item-center between">
        <text style="margin-right: 10px">正确率 ≥</text>
        <u--input :value="levelData.passRate" border="none" @input="$emit('updateCondition', $event)"/>
        <view style="margin-left: 10px">%</view>
      </view>
    </view>

    <SelectLevelPopup ref="SelectLevelPopupRef" @confirm="updateLevelName" :levelNameList="levelNameList"></SelectLevelPopup>
  </view>

</template>
<script>
import SelectLevelPopup from "./SelectLevelPopup.vue";

export default {
  name: "SelectLevel",
  components: {SelectLevelPopup},
  props: {
    levelNameList: Array,
    levelData: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    openSelectLevelPopup() {
      this.$refs.SelectLevelPopupRef.open(this.levelData.levelName);
    },
    updateLevelName(event) {
      this.$emit("updateLevelName", event)
    }
  }
}
</script>
<style scoped lang="scss">
.SelectLevel {
  border-radius: 24rpx;
  background-color: #FFFFFF;

  .option-item {
    height: 60px;
    padding: 0 20px;
    padding-left: 18px;
    border-bottom: solid 1px #F2F2F2;

    .label {
      font-size: 32rpx;
      color: #333333;
      position: relative;
    }

    .required {
      color: #f56c6c;
      line-height: 20px;
      font-size: 20px;
      margin-right: 4px;
      margin-top: 6px;
    }

    .operate {
      margin-left: 16px;
    }

    .edit-img {
      width: 24px;
      height: 24px
    }
  }
}


</style>